<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view style="width:50rpx;" @click="back">
					<image style="width:20rpx;height:34rpx;" src="/static/image/mv_tuichu.png"></image>
				</view>
				<view>提现</view>
				<view style="width:50rpx;"></view>
			</view>
		</view>
		<view style="width: 750rpx;height: 650rpx;background: linear-gradient(228deg,#CCEAFF,#F9FBFC);">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view style="color: #000;">
				<view style="font-size: 52rpx;font-weight: bold;padding:20rpx;">￥{{money}}</view>
				<view style="font-size: 30rpx;font-weight: bold;padding-left:20rpx;">账户余额</view>
			</view>
			<view
				style="width: 670rpx;height: 224rpx;background: #FFFFFF;border-radius: 28rpx;padding:20rpx;margin:36rpx 20rpx 24rpx;">
				<view style="font-size: 30rpx;font-weight: bold;">提现金额</view>
				<view class="flex" style="margin:20rpx 0; border-bottom:2rpx solid #EEEEEE;padding-bottom:12rpx;">
					<view style="font-size: 60rpx;font-weight: bold;line-height: 84rpx;">￥</view>
					<input v-model="price" type="digit" style="font-size:30rpx;height:84rpx;margin-left:16rpx;"
						placeholder="请输入提现金额" />
				</view>
				<view style="font-size:24rpx;">手续费代扣<text style="color: #1176EF;">{{rate}}%</text> </view>
			</view>
			<view
				style="width: 670rpx;height: 466rpx;background: #FFFFFF;border-radius: 28rpx;padding:20rpx;margin:0 auto 36rpx;">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view style="font-size: 30rpx;font-weight: bold;">您的收款账户</view>
					<view style="display: flex;align-items: center;" @tap="onhandoff">
						<view style="font-size: 30rpx;">{{handoffAdd? '添加卡号' : '切换卡号'}}</view>
						<image src="/static/image/03_1ikj.png" mode=""
							style="height:26rpx;width:14rpx;margin-left: 7rpx;"></image>
					</view>
				</view>
				<view class="flexJusp"
					style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;margin:20rpx 0;">
					<view style="font-size:26rpx;">开户行</view>
					<input v-model="bank" style="text-align: right;font-size: 26rpx;" placeholder="请输入开户行" />
				</view>
				<view class="flexJusp"
					style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;margin:20rpx 0;">
					<view style="font-size:26rpx;">卡号</view>
					<input v-model="bankid" type="number" maxlength="16" style="text-align: right;font-size: 26rpx;"
						placeholder="请输入卡号" />
				</view>
				<view class="flexJusp"
					style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;">
					<view style="font-size:26rpx;">联系人</view>
					<input v-model="name" style="text-align: right;font-size: 26rpx;" placeholder="请输入联系人" />
				</view>
				<view class="flexJusp"
					style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;margin:20rpx 0 0;">
					<view style="font-size:26rpx;">联系电话</view>
					<input v-model="phone" maxlength="11" type="number" style="text-align: right;font-size: 26rpx;"
						placeholder="请输入联系电话" />
				</view>
			</view>
			<view style="font-size:26rpx;margin:0 28rpx;"> 提现说明</view>
			<view style="font-size:24rpx;margin:10rpx 28rpx 0;"><rich-text :nodes="content"></rich-text></view>
			<view class="buttons" @click="cash">确定提现</view>
			<view style="height:20rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '@/https/mixin.js'
	export default {
		mixins: [systemInfo],
		data() {
			return {
				price: '',
				scrollTop: 0,
				money: 0,
				bank: '',
				bankid: '',
				name: '',
				phone: '',
				rate: 0,
				content: '',
				handoffAdd: true
			}
		},
		onLoad() {
			this.getSystemInfo()
			this.loads()
		},
		onShow(e) {
			uni.$on("updateNum", (data) => {
				// console.log(data);
				this.bank = data.bank,
					this.bankid = data.bankid.replace(/\s*/g, ""),
					this.name = data.name,
					this.phone = data.phone
			})
			this.$httpapi('getCardList', 'POST', {}).then(res => {

				if (!res.data.length == 0) {
					this.bank = res.data[0].bank,
						this.bankid = res.data[0].bankid,
						this.name = res.data[0].name,
						this.phone = res.data[0].phone
					this.handoffAdd = false
				} else {
					this.handoffAdd = true
					this.bank = ''
					this.bankid = ''
					this.name = ''
					this.phone = ''
				}

			})
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		methods: {
			loads() {
				this.$httpapi('rate', 'POST', {}).then(res => {
					this.rate = res.data.rate
					this.content = res.data.content.replace(/\<img/gi,
						'<img style="max-width:100%; display: block;"');
				})
				this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
					this.money = res.data.money
				})
			},
			cash() {
				if (this.price == '') return this.$utils.showtt('请输入提现金额')
				if (this.bank == '') return this.$utils.showtt('请输入开户行')
				if (this.bankid == '') return this.$utils.showtt('请输入卡号')
				if (!this.$utils.cardNumber.test(this.bankid)) return this.$utils.showtt('请正确输入16位卡号')
				if (this.name == '') return this.$utils.showtt('请输入联系人')
				if (this.phone == '') return this.$utils.showtt('请输入联系电话')
				if (!this.$utils.isMobile.test(this.phone)) return this.$utils.showtt('联系电话格式不正确')
				if (this.price > this.money) {
					uni.showToast({
						title: '余额不足',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				this.$httpapi('cash', 'POST', {
					bank: this.bank,
					bankid: this.bankid,
					name: this.name,
					phone: this.phone,
					price: this.price,
					kindok: 1
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon: 'none'
					});
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			onhandoff() {
				uni.navigateTo({
					url: '/pages/wallet/Withdrawal/cardpacks'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.container {
		color: #333333;

		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}

		.buttons {
			margin: 100rpx auto 0;
			text-align: center;
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
</style>